<!-- 展示 -->
<template>
  <div>
    <div v-if="module == 'study'">
      <div class="container">
        <div class="loop-grid mb-30">
          <div class="row">
            <div class="col-lg-8 mb-30">
              <div
                class="carausel-post-1 hover-up border-radius-10 overflow-hidden transition-normal position-relative wow fadeInUp animated">
                <div class="arrow-cover"></div>
                <div class="slide-fade">
                  <swiper effect="fade" :options="swiperOption2" :slides-per-view="3" :space-between="50" ref="window">
                    <swiper-slide v-for="(item,i) in documents" :key="i">
                      <ky-article :data="item" module="window"></ky-article>
                    </swiper-slide>
                    <div class="swiper-pagination" slot="pagination"></div>
                  </swiper>
                </div>
              </div>
            </div>
            <div class="col-4" v-for="(item,i) in documents" :key="i">
              <ky-article :data="item" module="card" :slogan="true"></ky-article>
            </div>
          </div>
          <div class="row mt-50">
            <div class="col-12">
              <div class="pagination-area mb-30 wow fadeInUp animated">
                <nav aria-label="Page navigation example">
                  <ul class="pagination justify-content-start">
                    <li class="page-item"><a class="page-link" href="#"><i class="elegant-icon arrow_left"></i></a></li>
                    <li class="page-item active"><a class="page-link" href="#">01</a></li>
                    <li class="page-item"><a class="page-link" href="#">02</a></li>
                    <li class="page-item"><a class="page-link" href="#">03</a></li>
                    <li class="page-item"><a class="page-link" href="#">04</a></li>
                    <li class="page-item"><a class="page-link" href="#"><i class="elegant-icon arrow_right"></i></a>
                    </li>
                  </ul>
                </nav>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="module == 'show'" class="container">
      <div class="loop-list loop-list-style-1">
        <div class="row">
          <div class="col-6" v-for="(item,i) in documents" :key="i">
            <ky-article :data="item" module="card" :slogan="true"></ky-article>
          </div>
        </div>
      </div>
    </div>

    <div v-if="module == 'art'" class="container">
      <!--Loop Masonry-->
      <div class="grid row mb-30">
        <!-- <div class="grid-sizer"></div> -->
        <div class="col-4" v-for="(item,i) in documents" :key="i">
          <ky-article :data="item" module="card" :slogan="i%2 != 0"></ky-article>
        </div>
      </div>
    </div>

    <div v-if="module == 'list'" class="container">
      <div class="row">
        <div class="loop-list loop-list-style-1">
          <div class="col-12" v-for="(item,i) in documents" :key="i">
            <ky-article :data="item" module="list"></ky-article>
          </div>

        </div>
      </div>
    </div>
  </div>

</template>

<script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';
  import KyArticle from '@/components/module/ky-article'
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
      KyArticle
    },
    props: ['data', 'module'],
    data() {
      //这里存放数据
      return {
        swiperOption1: {
          // 参数选项,显示小点
          pagination: {
            el: ".swiper-pagination"
          }, //循环
          loop: true, //每张播放时长3秒，自动播放
          autoplay: {
            delay: 3000, //自动切换的时间间隔，单位ms
            stopOnLastSlide: false, //当切换到最后一个slide时停止自动切换
            stopOnLastSlide: true, //如果设置为true，当切换到最后一个slide时停止自动切换。
            disableOnInteraction: true, //用户操作swiper之后，是否禁止autoplay。
            reverseDirection: false, //开启反向自动轮播。
            waitForTransition: true, //等待过渡完毕。自动切换会在slide过渡完毕后才开始计时。
            disableOnInteraction: false,
            autoplayDisableOnInteraction: false
          },
          speed: 600,
        },
        documents: [{
            title: '测试文章的标题1arsfgjnslak nlsanmfl但是如果还能列你林肯日了狗看么另外干嘛呢离开m',
            status: 2,
            top: true,
            star: true,
            slogan: '这是我的一篇测试文章哇！数据来源都是我瞎写的，暂时不会对接后端哇',
            views: '23.6w',
            time: '3天前',
            path: '',
            likes: '1.9k',
            classify: [{
              name: '测试',
              path: ''
            }, {
              name: '开发',
              path: ''
            }, {
              name: '随心',
              path: ''
            }],
            img: 'http://cloud.kingyin.club/img/banner/1629775591037_bg6.jpg',
          },
          {
            title: '测试文章的标题2我与何去何从',
            status: 2,
            top: true,
            star: true,
            slogan: '这是我的一篇测试文章哇！数据来源都是我瞎写的，暂时不会对接后端哇dzfngr kv anknasr gjn.aklwn gel.ksnarg lnaksl.n',
            views: '23.6w',
            time: '3天前',
            path: '',
            likes: '1.9k',
            classify: [{
              name: '测试',
              path: ''
            }, {
              name: '开发',
              path: ''
            }, {
              name: '随心',
              path: ''
            }],
            img: 'http://cloud.kingyin.club/img/banner/1629775591037_bg6.jpg',
          },
          {
            title: '测试文章的标题3',
            status: 2,
            top: true,
            star: true,
            slogan: '这是我的一篇测试文章哇！数据来源都是我瞎写的，暂时不会对接后端哇',
            views: '23.6w',
            time: '3天前',
            path: '',
            likes: '1.9k',
            classify: [{
              name: '测试',
              path: ''
            }, {
              name: '开发',
              path: ''
            }, {
              name: '随心',
              path: ''
            }],
            img: 'http://cloud.kingyin.club/img/banner/1629775591037_bg6.jpg',
          },
          {
            title: '测试文章的标题4',
            status: 2,
            top: true,
            star: true,
            slogan: '这是我的一篇测试文章哇！数据来源都是我瞎写的，暂时不会对接后端哇',
            views: '23.6w',
            time: '3天前',
            path: '',
            likes: '1.9k',
            classify: [{
              name: '测试',
              path: ''
            }, {
              name: '开发',
              path: ''
            }, {
              name: '随心',
              path: ''
            }],
            img: 'http://cloud.kingyin.club/img/banner/1629775591037_bg6.jpg',
          },
          {
            title: '测试文章的标题4',
            status: 2,
            top: true,
            star: true,
            slogan: '这是我的一篇测试文章哇！数据来源都是我瞎写的，暂时不会对接后端哇',
            views: '23.6w',
            time: '3天前',
            path: '',
            likes: '1.9k',
            classify: [{
              name: '测试',
              path: ''
            }, {
              name: '开发',
              path: ''
            }, {
              name: '随心',
              path: ''
            }],
            img: 'http://cloud.kingyin.club/img/banner/1629775591037_bg6.jpg',
          },
          {
            title: '测试文章的标题4',
            status: 2,
            top: true,
            star: true,
            slogan: '这是我的一篇测试文章哇！数据来源都是我瞎写的，暂时不会对接后端哇',
            views: '23.6w',
            time: '3天前',
            path: '',
            likes: '1.9k',
            classify: [{
              name: '测试',
              path: ''
            }, {
              name: '开发',
              path: ''
            }, {
              name: '随心',
              path: ''
            }],
            img: 'http://cloud.kingyin.club/img/banner/1629775591037_bg6.jpg',
          }
        ]
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }

</script>
<style scoped>

</style>
